<template>
    <div class="auth-box">
    <div class="auth-slider-box">
       <div class="close-box">
           <p @click="onClosefn">关闭</p>
       </div>
       <!-- 进度条部门信息 -->
       <div class="cont-info">
           <p class="title">{{deptInfo.dept_name}}</p>
           <p class="info-tips">已使用{{deptInfo.used_storage}}, 共{{deptInfo.max_storage}}</p>
           <Progress 
           :width='width'
           :fheight='fheight'
           :fwidth='fwidth'
           :background = 'background'
           />
       </div>
    <!-- 操作面板 -->
    <div class="menu-box flex flex-align-center">
        <p class="flex-1" @click="onOpenwin">管理文件共享成员</p>
        <img src="@/assets/img/filepanel/help.png" alt="" @mouseenter="is_auth = true" @mouseleave="is_auth = false">
            <div class="auth-table-box" v-if='is_auth'>
                <p class="table-title">
                    权限详情
                </p>
                <div class="tips-box">
                    <p>注：1、个人权限设置优先于群组权限,群组权限优先于部门权限。</p>
                    <p class="table-tips">2、继承上级：继承上级文件夹的所有共享成员设置。</p>
                </div>
                <div class="table">
                    <div class="th head flex" >
                        <div class="td" :class="{tdw:item.state != 0,noborder:index == 7}" v-for="(item,index) in head" :key='index' >
                        {{item.value}}
                        </div>
                    </div>
                    <div class="th flex" v-for="(item,index) in tabel_data" :key='index' :class="{noborder:index == 6}">
                        <div class="td" :class="{tdw:e.state == 2,noborder:i == 7}" v-for="(e,i) in item" :key='i' >
                        <p v-if='e.state == 2'>{{e.value}}</p>
                        <img v-if='e.state == 1' src="@/assets/img/filepanel/auth-gou.png" alt="">
                        </div>
                    </div>    
                </div>
            </div>
    </div>
    <!-- 共享文件夹列表 -->
    <div class="user-list-box">
        <div class="user-list-head flex">
            <div class="user-list-title flex flex-align-center">
                <img src="@/assets/img/common/xiangxia.png" alt="">
                <p>所有成员 {{nums}}</p>
            </div>
            <div class="user-list-right flex flex-align-center" @click="changeSwitchfn">
                <p>继承上级</p>
                <img src="@/assets/img/filepanel/off.png" v-if='!switch_status' alt="">
                <img src="@/assets/img/filepanel/on.png" v-else alt="">
            </div>
        </div>
        <div class="list-box">
            <div class="item flex flex-align-center" v-for="(item,index) in memberlist" :key="index">
                <div class="user-info flex flex-align-center flex-1">
                    <img class="user-icon" v-if="item.type == 'user'" src="@/assets/img/common/user-icon.png" alt="">
                    <img class="user-icon" v-if="item.type == 'dept'" src="@/assets/img/common/dept-icon.png" alt="">
                    <img class="user-icon" v-if="item.type == 'groups'" src="@/assets/img/common/groups-icon.png" alt="">
                    <div>
                        <p class="name">{{item.name}}</p>
                        <p class="email" v-if="item.type == 'user'">{{item.email}}</p>
                        <p class="email" v-else>{{item.nums}}人</p>
                    </div>
                    <authChebox :leftbox='true' :menu_data='menu_data' :child_item='child_item' :child_data='child_data' style="margin-top:25px" v-if="show_authchebox === index"/>
                </div>
                <div class="caozuo-box">
                     <p @click="deleteFolderRoles(item.folder_user_permission_id)">删除</p>
                    <div class="qx-box flex flex-align-center" @click="onShowAuthCheBox(index,item)">
                        <p v-if='!item.is_customize'>{{RolesNames.folder_group_roles[item.permission]}}</p>
                        <p v-else>自定义</p>
                        <img src="@/assets/img/common/xiangxia.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <authBox v-on:close="onAuthBoxFn" v-on:next="onOpenSetWin" v-if="is_authbox"/>
    <authSetBox v-on:close="onSetBoxFn"  v-on:add="onOpenwin" v-if="is_setbox"/>
    </div>
</template>
<script>
import Progress from '../common/progress'
import authBox from './authBox'
import authSetBox from './authSetBox'
import authChebox  from './authChebox'
export default {
    components: {
        Progress,
        authBox,
        authSetBox,
        authChebox
    },
    data () {
        return {
            menu_data:[], // 子组件非自定义时数据
            child_data:[], // 子组件数据自定义权限数据 
            child_item:{}, // 自定义点击时需要
            width:1, //百分比
            fheight: 3, //进度条高度
            fwidth: 230, //进度条长度
            background:'#ff9643', //进度条颜色
            switch_status:true, //是否继承上级文件权限
            show_authchebox:'', //显示授权
            head: [
                    {value:'权限横版名称',state:2},
                    {value:'预览',state:0},
                    {value:'上传',state:0},
                    {value:'下载',state:0},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                ],
            tabel_data:[
                  [{value:'预览者',state:2},
                    {value:'预览',state:1},
                    {value:'上传',state:0},
                    {value:'下载',state:0},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                  ],
                  [
                    {value:'编辑者',state:2},
                    {value:'预览',state:1},
                    {value:'上传',state:1},
                    {value:'下载',state:1},
                    {value:'复制',state:1},
                    {value:'剪切',state:1},
                    {value:'新建文件夹',state:1},
                    {value:'重命名',state:1}
                ],
                [
                    {value:'上传/下载者',state:2},
                    {value:'预览',state:1},
                    {value:'上传',state:1},
                    {value:'下载',state:1},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                ],
                [
                    {value:'上传者',state:2},
                    {value:'预览',state:1},
                    {value:'上传',state:1},
                    {value:'下载',state:0},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                ],
                [
                    {value:'不可见',state:2},
                    {value:'预览',state:0},
                    {value:'上传',state:0},
                    {value:'下载',state:0},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                ],
                [
                    {value:'一级员工',state:2},
                    {value:'预览',state:0},
                    {value:'上传',state:0},
                    {value:'下载',state:0},
                    {value:'复制',state:0},
                    {value:'剪切',state:0},
                    {value:'新建文件夹',state:0},
                    {value:'重命名',state:0}
                ],
                [
                    {value:'管理者',state:2},
                    {value:'预览',state:1},
                    {value:'上传',state:1},
                    {value:'下载',state:1},
                    {value:'复制',state:1},
                    {value:'剪切',state:1},
                    {value:'新建文件夹',state:1},
                    {value:'重命名',state:1}
                ],
            ],
            is_auth:false, // 权限说明窗口
            is_authbox:false, //管理文件共享成员
            is_setbox:false, // 打开弹窗
            RolesNames:{}, // 权限列表
            nums:0, // 成员总人数
            deptInfo:{}, // 部门使用情况
        }
    },
    mounted () {
      this.getfolderRolesNames();
      this.getFolderRolesList();
      this.getUserDeptCapacity();
    },
    computed:{
        memberlist(){
            return this.$store.getters.getMemberList
        }
    },
    methods: {
        changeSwitchfn(){
            this.switch_status = !this.switch_status;
        },

        // 显示授权信息
        onShowAuthCheBox(i,item){
            if(i != this.show_authchebox || this.show_authchebox === ''){
                this.show_authchebox = i;
                this.child_data = [];
                this.menu_data = [];
                // 设置权限窗口 初始化
                var RolesNames = JSON.parse(localStorage.RolesNames);
                for(var i in RolesNames.folder_group_roles){
                    var obj = new Object();
                    obj.name = RolesNames.folder_group_roles[i];
                    obj.key = i;
                    this.menu_data.push(obj);
                }
                for(var i in RolesNames.custom_permissions){
                    var obj = new Object();
                    obj.name = RolesNames.custom_permissions[i];
                    obj.key = i;
                    obj.status = false;
                    this.child_data.push(obj);
                }
                // 将当前id传入到子组件
                this.child_item = item;

            }else{ 
                // 关闭授权窗口时，修改更新用户权限信息
                this.updateAuthInfo(item);
                this.show_authchebox = '';
            }
        },

        // 关闭选择公司成员窗口
        onAuthBoxFn(){
            this.is_authbox = false;
        },

        // 打开管理文件共享成员
        onOpenwin(){
            this.is_authbox = true;
            this.is_setbox = false;
        },

        // 关闭左侧滑块
        onClosefn(){
            this.$emit('close');
        },

        // 关闭设置权限窗口
        onSetBoxFn(){
            this.is_setbox = false;
            this.getFolderRolesList();
        },

        // 设置权限窗口
        onOpenSetWin(){
            this.is_authbox = false;
            this.is_setbox = true;
        },

        // 更新用户权限信息
       async updateAuthInfo(item){
           var permissions_arr = [];
           if(item.is_customize){
               permissions_arr = item.permission;
           }else{
               permissions_arr[0] = item.permission;
           }
           var params = {
                folder_id: this.$store.state.listData.id,
                folder_user_permission_id: item.folder_user_permission_id,
                permission: JSON.stringify(permissions_arr),
                is_customize: item.is_customize
            }
            var data = await this.$https.post('sharedfile/editFolderRoles',params);
            if(data.success){
                this.$toast({
                    message:data.error
                });
            }else{
                this.$toast({
                    message:data.error
                })
            }
        },

        // 获取协作成员列表
        async getFolderRolesList(){
            this.nums=0;
            var params = {
                folder_id: this.$store.state.listData.id //文件夹id
            }
            var {data} = await this.$https.post('sharedfile/getFolderRolesList',params)
            this.$store.commit('setMemberList',data.member_list);
            for(var i in data.member_list){
                this.nums += data.member_list[i].nums
            }
        },

        // 获取权限对应关系
        async getfolderRolesNames(){
            var {data} = await this.$https.post('sharedfile/getfolderRolesNames',{})
            localStorage.RolesNames = JSON.stringify(data); // 将权限字段存入缓存
            this.RolesNames = data;
        },

        // 获取部门容量信息
        async getUserDeptCapacity(){
            var {data} = await this.$https.post('sharedfile/getUserDeptCapacity',{})
            data.usage_rate = parseInt(data.usage_rate);
            if(data.usage_rate){
               this.width = data.usage_rate;
            }
            if(data.usage_rate>70){ // 设定 容量超过70%，进度条显示红色
                this.background = "red";
            }
            this.deptInfo = data;
        },

        // 删除协作成员
        async deleteFolderRoles(id){
            var params = {
                folder_id: this.$store.state.listData.id, //文件夹id
                folder_user_permission_id:id //成员id
            }
            var data = await this.$https.post('sharedfile/deleteFolderRoles',params)
            this.$toast({message: data.error});
            this.getFolderRolesList();
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/filepanel/authslider.less);
</style>


